<template>
  <div>
    <!-- Navbar导航栏 -->
    <span @click="onClickRight" class="goodsadd">添加</span>
    <van-row>
      <van-col :span="24">
        <form>
          <van-search v-model="value" placeholder="请输入商品关键词" show-action @search="getCateList" @cancel="onCancel" @clear="cleared" />
        </form>
      </van-col>
    </van-row>
    <!-- 搜索历史 -->
    <div v-if="catelist.length < 1">
      <!-- 如果没有历史 -->
      <div v-if="searchHistories.length < 1">
        <van-row type="flex" justify="space-between">
          <van-col>
            <van-cell title="搜索历史" />
          </van-col>
          <van-col>
            <van-cell icon="delete" />
          </van-col>
        </van-row>
        <van-divider :style="{ color: '#000', borderColor: '#ccc', padding: '0 16px' }">暂无搜索历史</van-divider>
      </div>
      <!-- 如果有历史 -->
      <div v-else>
        <van-row type="flex" justify="space-between">
          <van-col>
            <van-cell title="搜索历史" />
          </van-col>
          <van-col>
            <van-cell icon="delete" @click="deleteHistories" />
          </van-col>
        </van-row>
        <van-row class="h-box">
          <van-tag type="primary" v-for="(item, index) in searchHistories" :key="index" @click="pushHistory(item)">{{item}}</van-tag>
        </van-row>
      </div>
    </div>
    <div v-else>
      <!-- 渲染搜索内容 -->
      <van-row>
        <van-col :span="24">
          <van-swipe-cell v-for="item in catelist" :key="item.id" :on-close="onClose" :data-id="item.id">
            <van-cell :border="true" :title="item.name" :value="item.ctime" />
            <template slot="right">
              <van-button square type="danger" text="删除" />
            </template>
          </van-swipe-cell>
        </van-col>
      </van-row>
    </div>
    <!-- Tabbar标签栏 -->
    <van-tabbar v-model="active" active-color="#07c160" inactive-color="#000" route>
      <van-tabbar-item replace to="/home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/member" icon="search">会员</van-tabbar-item>
      <van-tabbar-item replace to="/shopcar" icon="friends-o">购物车</van-tabbar-item>
      <van-tabbar-item replace to="/search" icon="setting-o">搜索</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Notify } from 'vant'
export default {
  name: 'search',
  data () {
    return {
      active: 'home',
      // 获取的商品数据列表
      catelist: [],
      value: '',
      // 搜索历史
      searchHistories: []
    }
  },
  methods: {
    // 点击返回
    onClickLeft () {
      this.$router.go(-1)
    },
    // 点击添加商品
    onClickRight () {
      this.$router.push('/addgoods')
    },
    // 点击搜索，获取数据
    async getCateList () {
      if (this.value.trim().length > 0) {
        const { data: res } = await this.$http.get('/api/getprodlist')
        if (res.status !== 0) {
          return Notify('搜索失败')
        }
        res.message.forEach(item => {
          item.ctime = '商品上架时间：' + item.ctime.substr(0, 10)
        })
        this.catelist = res.message
        var result = this.searchHistories.every(item => {
          return item !== this.value
        })
        if (result) {
          this.searchHistories.push(this.value)
        }
      }
    },
    onCancel () {
      this.catelist = []
    },
    cleared () {
      this.catelist = []
    },
    // 删除搜索的商品
    onClose (clickPosition, instance) {
      console.log(instance.$el.dataset.id)
      switch (clickPosition) {
        case 'left':
        case 'cell':
        case 'outside':
          instance.close()
          break
        case 'right':
          this.$dialog
            .confirm({
              message: '确定删除吗？'
            })
            .then(async () => {
              var { data: res } = await this.$http.get(`/api/delproduct/${instance.$el.dataset.id}`)
              if (res.status !== 0) {
                return Notify('没有删除成功')
              }
              this.getCateList()
              instance.close()
            })
            .catch(async => {
              Notify('取消删除')
            })
          break
      }
    },
    // 删除搜索历史
    deleteHistories () {
      this.searchHistories = []
    },
    // 点击还原历史
    pushHistory (item) {
      this.value = item
    }
  }
}
</script>

<style lang="less" scoped>
.van-cell {
  text-align: left;
}

.h-box {
  width: 100%;
  height: 300px;
}

.van-tag {
  margin-left: 10px;
}

.h-box {
  text-align: left;
}
.goodsadd {
  color: #fff;
  position: absolute;
  top: 9px;
  align-items: center;
  right: 20px;
  z-index: 9999;
}
</style>
